<template>
  <div  style="width: 3600px">
    <el-row >
      <!-- 部门树 -->
      <el-col :lg="1" :xs="24" style="">
        <el-card shadow="hover">
          <el-input v-model="buildName" placeholder="楼栋名称" prefix-icon="Search" clearable />
          <el-tree class="mt-2" ref="buildTreeRef" node-key="id" :data="buildOptions"
                   :props="{ label: 'buildName', children: 'children' }"
                   :expand-on-click-node="false"
                   :filter-node-method="filterNode"
                   highlight-current
                   default-expand-all
                   @node-click="handleNodeClick"/>
        </el-card>
      </el-col>
      <!-- 展示模块-->
      <el-col :lg="20"  style="margin-left: 10px">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <router-link :to="'/property/estate'" class="link-type">
              <el-button icon="el-icon-back" size="mini">
                返 回
              </el-button>
            </router-link>
          </el-col>
<!--          <el-col :span="1.5">-->
<!--            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"-->
<!--                       v-hasPermi="['module:estateBuild:add']">新增</el-button>-->
<!--          </el-col>-->
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="estateAllAdd"
                       v-hasPermi="['module:estateBuild:add']">批量匹配数据</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-row>
          <div>
            <el-row>
              <el-col class="build" :span="3">
                {{this.buildList.buildName}}
              </el-col>
              <el-col :span="1">
                <el-col :span="5">
                  <div style="height: 20px;width: 20px;background-color: #b4eeff"></div>
                </el-col>
                <el-col :span="18">
                  普通房
                </el-col>
              </el-col>
              <el-col :span="1">
                <el-col :span="5">
                  <div style="height: 20px;width: 20px;background-color: #cccccc"></div>
                </el-col>
                <el-col :span="18">
                  空置房
                </el-col>
              </el-col>
              <el-col :span="1">
                <el-col :span="5">
                  <div style="height: 20px;width: 20px;border: 5px solid #2E74B5;"></div>
                </el-col>
                <el-col :span="18">
                 已绑定微信
                </el-col>
              </el-col>
              <el-col :span="1">
                <el-col :span="5">
                  <div style="height: 20px;width: 20px;border: 2px solid #777777;"></div>
                </el-col>
                <el-col :span="18">
                  未绑定微信
                </el-col>
              </el-col>
            </el-row>
            <el-row>
              <el-col v-for="t in buildList.estateUnitTree" class="size2" v-if="t.size ==2">
                  <el-row>
                  <span class="unit">
                    {{t.unitNo+"单元"}}
                  </span>
                  </el-row>
                  <el-row v-for="f in t.estateFloorTrees">
                    <el-col v-for="r in f.estateRoomTrees" :span = "6" class="room" v-if="r.bangWxUser!=0&r.kongzhi!=1">
                      <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                        <div class="roomNo">
                          {{r.roomNo}}
                        </div>
                        <div class="realName">
                          {{r.realName}}
                        </div>
                        <div class="qianfei">
                          {{r.nianfen}}年{{r.qianfei}}月
                        </div>
                        <div class="phone">
                          {{r.phoneNum}}
                        </div>
                      </router-link>
                    </el-col>
                    <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomBang" v-if="r.bangWxUser==0&r.kongzhi!=1">
                      <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                        <div class="roomNo">
                          {{r.roomNo}}
                        </div>
                        <div class="realName">
                          {{r.realName}}
                        </div>
                        <div class="qianfei">
                          {{r.nianfen}}年{{r.qianfei}}月
                        </div>
                        <div class="phone">
                          {{r.phoneNum}}
                        </div>
                      </router-link>
                    </el-col>
                    <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomKong" v-if="r.bangWxUser!=0&r.kongzhi==1">
                      <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                        <div class="roomNo">
                          {{r.roomNo}}
                        </div>
                        <div class="realName">
                          {{r.realName}}
                        </div>
                        <div class="qianfei">
                          {{r.nianfen}}年{{r.qianfei}}月
                        </div>
                        <div class="phone">
                          {{r.phoneNum}}
                        </div>
                      </router-link>
                    </el-col>
                    <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomBangKong" v-if="r.bangWxUser==0&r.kongzhi==1">
                      <router-link :to="'/property/wyfPay?estateId='+ queryParams.estateId+'&roomId='+r.id">
                        <div class="roomNo">
                          {{r.roomNo}}
                        </div>

                        <div class="realName">
                          {{r.realName}}
                        </div>
                        <div class="qianfei">
                          {{r.nianfen}}年{{r.qianfei}}月
                        </div>
                        <div class="phone">
                          {{r.phoneNum}}
                        </div>
                      </router-link>
                    </el-col>
                  </el-row>
              </el-col>
              <el-col v-for="t in buildList.estateUnitTree" class="size3" v-if="t.size ==3">
                <el-row>
                  <span class="unit">
                    {{t.unitNo+"单元"}}
                  </span>
                </el-row>
                <el-row v-for="f in t.estateFloorTrees">
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="room" v-if="r.bangWxUser!=0&r.kongzhi!=1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomBang" v-if="r.bangWxUser==0&r.kongzhi!=1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomKong" v-if="r.bangWxUser!=0&r.kongzhi==1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomBangKong" v-if="r.bangWxUser==0&r.kongzhi==1">
                    <router-link :to="'/property/wyfPay?estateId='+ queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>

                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                </el-row>
              </el-col>
              <el-col v-for="t in buildList.estateUnitTree" class="size4" v-if="t.size ==4">
                <el-row>
                  <span class="unit">
                    {{t.unitNo+"单元"}}
                  </span>
                </el-row>
                <el-row v-for="f in t.estateFloorTrees">
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="room" v-if="r.bangWxUser!=0&r.kongzhi!=1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomBang" v-if="r.bangWxUser==0&r.kongzhi!=1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomKong" v-if="r.bangWxUser!=0&r.kongzhi==1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomBangKong" v-if="r.bangWxUser==0&r.kongzhi==1">
                    <router-link :to="'/property/wyfPay?estateId='+ queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>

                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                </el-row>
              </el-col>
              <el-col v-for="t in buildList.estateUnitTree" class="size5" v-if="t.size ==5">
                <el-row>
                  <span class="unit">
                    {{t.unitNo+"单元"}}
                  </span>
                </el-row>
                <el-row v-for="f in t.estateFloorTrees">
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="room" v-if="r.bangWxUser!=0&r.kongzhi!=1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomBang" v-if="r.bangWxUser==0&r.kongzhi!=1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomKong" v-if="r.bangWxUser!=0&r.kongzhi==1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomBangKong" v-if="r.bangWxUser==0&r.kongzhi==1">
                    <router-link :to="'/property/wyfPay?estateId='+ queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>

                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                </el-row>
              </el-col>
              <el-col v-for="t in buildList.estateUnitTree" class="size3" v-if="t.size  >5">
                <el-row>
                  <span class="unit">
                    {{t.unitNo+"单元"}}
                  </span>
                </el-row>
                <el-row v-for="f in t.estateFloorTrees">
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="room" v-if="r.bangWxUser!=0&r.kongzhi!=1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomBang" v-if="r.bangWxUser==0&r.kongzhi!=1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomKong" v-if="r.bangWxUser!=0&r.kongzhi==1">
                    <router-link :to="'/property/wyfPay?estateId='+queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>
                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                  <el-col v-for="r in f.estateRoomTrees" :span = "6" class="roomBangKong" v-if="r.bangWxUser==0&r.kongzhi==1">
                    <router-link :to="'/property/wyfPay?estateId='+ queryParams.estateId+'&roomId='+r.id">
                      <div class="roomNo">
                        {{r.roomNo}}
                      </div>

                      <div class="realName">
                        {{r.realName}}
                      </div>
                      <div class="qianfei">
                        缴费至：{{r.qianfei}}月
                      </div>
                      <div class="phone">
                        {{r.phoneNum}}
                      </div>
                    </router-link>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>

          </div>
        </el-row>
      </el-col>

    </el-row>
  </div>
</template>

<script>

import { listFloor, getFloor, delFloor, addFloor, updateFloor, exportFloor, resetQrCode } from "@/api/module/estate/floor";
import {
  listBuild,
  getBuild,
  delBuild,
  addBuild,
  updateBuild,
  exportBuild,
  getTreeSelect,
  addAllRoom
} from "@/api/module/estate/build";
import { listUnit, getUnit, delUnit, addUnit, updateUnit, exportUnit } from "@/api/module/estate/unit";
import {getTransferData, updateRoom, updateRoomFloor} from "@/api/module/estate/room";


import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listPropertyNoPage } from "@/api/module/property/property";
import Template from "@/views/module/wx/template.vue";
import {listAllEstate} from "@/api/module/estate/estate";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";


export default {
  name: "Build",
  components: {Treeselect, Template},
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      buildName:undefined,
      buildLevel:undefined,
      buildType:undefined,
      chooseBuildId:undefined,
      // 总条数
      total: 0,
      allRoomList:[],
      valueRoomIds:[],
      // 楼栋（1级） + 单元（2级） 表格数据
      buildList: [],
      propertyListOptions: [],
      estatesOptions: [],
      buildOptions:[],//
      floorList: [],
      unitList:[],
      // 弹出层标题
      title: "",
      titleUnit:"",
      titleFloor:"",
      titleBandRoom:"房屋绑定",
      // 是否显示弹出层
      open: false,
      openUnit: false,
      openFloor: false,
      openBandRoom: false,
      queryParams:{
        pageNum: 1,
        pageSize: 10,
        id:undefined,
        estateId:undefined,
        parentId:undefined,
      },
      // 查询参数
      queryParamsUnit: {
        pageNum: 1,
        pageSize: 10,
        buildId:undefined,
      },
      // 查询参数
      queryParamsFloor: {
        pageNum: 1,
        pageSize: 10,
        unitId:undefined,
        buildId:undefined,
      },
      queryParamsRoom: {
        pageNum: 1,
        pageSize: 10,
        buildId:undefined,
      },
      chooseFloor:{},
      // 表单参数
      form: {},
      formUnit:{},
      formFloor:{},
      formRoom:{},
      // 表单校验
      rules: {
      }
    }
  },
  watch: {
    // 根据名称筛选部门树
    buildName(val) {
      this.$refs.buildTreeRef.filter(val);
    }
  },
  created() {
    this.queryParams.estateId = this.$route.query.estateId ? parseInt(this.$route.query.estateId) : 0;
    this.queryParams.parentId = this.$route.query.pId ? parseInt(this.$route.query.pId) : 0;
    this.getList();
    this.getTreeSelect();
  },
  methods: {
    /** 查询楼栋（1级） + 单元（2级） 列表 */
    getList() {
      this.loading = true;
      listBuild(this.queryParams).then(response => {
        console.log(response);
        this.loading = false;
        console.log(response)
        this.buildList = response;
      });
    },
    /** 查询楼宇单元数据列表 */
    getUnitList() {
      this.loading = true;
      listUnit(this.queryParamsUnit).then(response => {
        this.unitList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getEstateList() {
      listAllEstate().then(response => {
        console.log('getEstateList',response.data);
        this.estatesOptions = response.data;
      });
    },
    getPropertyList() {
      listPropertyNoPage().then(response => {
        this.propertyListOptions = response.data;
      });
    },
    handleBandRoom(row){
      console.log('handleBandRoom', row);
      this.openBandRoom = true;
      this.queryParamsRoom.estateId = row.estateId;
      this.queryParamsRoom.buildId = row.buildId;
      this.queryParamsRoom.unitId = row.unitId;
      this.queryParamsRoom.floorId = row.id;

      this.chooseFloor = row;
      getTransferData(this.queryParamsRoom).then(response => {
        this.relationList = response.data.valueRoomList;
        this.valueRoomIds = response.data.valueRoomIds;
        this.allRoomList = response.data.allRoomList;
        console.log('this.allRoomList',this.allRoomList)
      });
    },
    changeItem(value, direction, movedKeys){
      console.log('changeItem value',value);
      console.log('changeItem direction',direction);
      console.log('changeItem movedKeys',movedKeys);

      let chooseAddIds = [];
      let chooseRemoveIds = [];

      this.formRoom.buildId = this.chooseFloor.buildId;
      this.formRoom.unitId = this.chooseFloor.unitId;

      if(direction == 'right') {//添加
        chooseAddIds = value;
        this.formRoom.floorId = this.chooseFloor.id;
        //执行添加
        for(let index in chooseAddIds){
          this.formRoom.id = chooseAddIds[index];

          updateRoomFloor(this.formRoom).then(response => {
            // this.open = false;
            // this.getList();
          }).finally(() => {
            // this.buttonLoading = false;
            // this.msgSuccess("绑定成功");
          });
        }
      }else{
        chooseRemoveIds = movedKeys;
        this.formRoom.floorId = 0;
        //执行移除
        for(let index in chooseRemoveIds){
          this.formRoom.id = chooseAddIds[index];
          updateRoomFloor(this.formRoom).then(response => {
            // this.open = false;
            // this.getList();
          }).finally(() => {
            // this.buttonLoading = false;
            // this.msgSuccess("解绑成功");
          });
        }
      }
    },
    downloadImg(row){
      window.location.href = process.env.VUE_APP_BASE_API + "/common/download/floor/" + row.id;
    },
    resetQrCode(row){
      var data = {
        id: row.id
      };
      resetQrCode(data).then(response => {
        if(response.code === 200){
          this.msgSuccess("生成成功");
          this.getList();
        }else{
          this.msgError("生成失败");
        }
      });
    },
    /** 查询设备组下拉树结构 */
    getTreeSelect() {
      getTreeSelect(this.queryParams).then(response => {
        // this.buildOptions=[];
        // const data = { id: 0, buildName: '楼宇', children: [] }
        // data.children = this.handleTree(response.data, "id", "parentId");
        // this.buildOptions.push(data);
        // this.buildOptions = [];
        // const data = { id: 0, buildName: '楼宇', children: [] }
        // data.children = response.data;
        // this.buildOptions.push(data);
        this.buildOptions = response.data;
      });
    },
    /** 转换楼宇层级数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.buildName,
        children: node.children
      };
    },
    getFloorList() {
      this.loading = true;
      listFloor(this.queryParamsFloor).then(response => {
        this.floorList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /** 节点单击事件 */
    handleNodeClick(data){
      this.queryParams.id = data.id;
      console.log(data)
      this.getList();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cancelUnit(){
      this.openUnit = false;
      this.resetUnit();
    },
    // 取消按钮
    cancelFloor() {
      this.openFloor = false;
      this.resetFloor();
    },
    cancelBand(){
      this.openBandRoom = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        propertyId: undefined,
        estateId: this.queryParams.estateId,
        buildName: undefined,
        parentId: this.queryParams.parentId,
        level: undefined,
        sort: undefined,
        state: undefined,
        lng:undefined,
        lat:undefined,
      }
      this.resetForm("form");
    },
    // 表单重置
    resetUnit() {
      this.formUnit = {
        id: undefined,
        estateId: this.queryParams.estateId,
        buildId: this.queryParamsUnit.buildId,
        unitNo: undefined,
        state: undefined,
        sort: undefined,
      }
      this.resetForm("form");
    },
    // 表单重置
    resetFloor() {
      this.form = {
        id: undefined,
        propertyId: undefined,
        estateId: this.queryParams.estateId,
        buildId: this.queryParamsFloor.buildId,
        unitId:this.queryParamsFloor.unitId,
        surveyTemplateId: undefined,
        surveyStandardId: undefined,
        floorNum: undefined,
        floorName: undefined,
        state: undefined,
        sort: undefined,
        qrCode: undefined,
        createTime: undefined,
        remark: undefined,
      }
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length!==1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加楼栋";
    },
    /** 批量匹配按钮操作 */
    estateAllAdd(){
      addAllRoom(this.queryParams);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      const id = row.id || this.ids;
      getBuild(id).then(response => {
        this.loading = false;
        this.form = response.data;
        this.open = true;
        this.title = "修改楼栋";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateBuild(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              this.getTreeSelect();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addBuild(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              this.getTreeSelect();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除楼栋编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        return delBuild(ids);
      }).then(() => {
        this.loading = false;
        this.getList();
        this.getTreeSelect();
        this.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有楼栋数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportBuild(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },

    /** 新增按钮操作 */
    handleAddUnit() {
      this.resetUnit();
      this.openUnit = true;
      this.titleUnit = "添加楼宇单元数据";
    },
    /** 修改按钮操作 */
    handleUpdateUnit(row) {
      this.loading = true;
      this.reset();
      const id = row.id || this.ids;
      getUnit(id).then(response => {
        this.loading = false;
        this.formUnit = response.data;
        this.openUnit = true;
        this.titleUnit = "修改楼宇单元数据";
      });
    },
    /** 提交按钮 */
    submitFormUnit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.formUnit.id != null) {
            updateUnit(this.formUnit).then(response => {
              this.msgSuccess("修改成功");
              this.openUnit = false;
              this.getUnitList();
              this.getTreeSelect();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addUnit(this.formUnit).then(response => {
              this.msgSuccess("新增成功");
              this.openUnit = false;
              this.getUnitList();
              this.getTreeSelect();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDeleteUnit(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除楼宇单元数据编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        return delUnit(ids);
      }).then(() => {
        this.loading = false;
        this.getUnitList();
        this.getTreeSelect();
        this.msgSuccess("删除成功");
      }).catch(() => {});
    },


    /** 新增按钮操作 */
    handleAddFloor() {
      this.resetFloor();
      this.openFloor = true;
      this.titleFloor = "添加楼栋的 楼层数据";
    },
    /** 修改按钮操作 */
    handleUpdateFloor(row) {
      this.loading = true;
      this.resetFloor();
      const id = row.id || this.ids;
      getFloor(id).then(response => {
        this.loading = false;
        this.formFloor = response.data;
        this.openFloor = true;
        this.titleFloor = "修改楼栋的 楼层数据";
      });
    },
    /** 提交按钮 */
    submitFormFloor() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.$route.query.estateId!=null){
            this.formFloor.estateId = this.$route.query.estateId;
          }
          this.buttonLoading = true;
          if (this.formFloor.id != null) {
            updateFloor(this.formFloor).then(response => {
              this.msgSuccess("修改成功");
              this.openFloor = false;
              this.getFloorList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addFloor(this.formFloor).then(response => {
              this.msgSuccess("新增成功");
              this.openFloor = false;
              this.getFloorList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDeleteFloor(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除楼栋的 楼层数据编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        return delFloor(ids);
      }).then(() => {
        this.loading = false;
        this.getFloorList();
        this.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExportFloor() {
      const queryParams = this.queryParamsFloor;
      this.$confirm('是否确认导出所有楼栋的 楼层数据数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportFloor(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    }
  }
};
</script>
<style>
.room{
  /*#f1fa8c*/
  background-color: #b4eeff;
  width: 140px;
  height: 110px;
  margin-left: 5px;
  margin-top: 5px;
  font-size: 15px;
  position:relative;
  border: 5px solid #2E74B5;
  /*border-radius:15px;*/
  /*justify-content: center;*/
  /*display: flex;*/
}
.roomBangKong{
  /*#f1fa8c*/
  background-color: #cccccc;
  width: 140px;
  height: 110px;
  margin-left: 5px;
  margin-top: 5px;
  font-size: 15px;
  position:relative;
  border: 2px solid #777777;
  /*border-radius:15px;*/
  /*justify-content: center;*/
  /*display: flex;*/
}
.roomKong{
  /*#f1fa8c*/
  background-color: #cccccc;
  width: 140px;
  height: 110px;
  margin-left: 5px;
  margin-top: 5px;
  font-size: 15px;
  position:relative;
  border: 5px solid #2E74B5;
  /*border-radius:15px;*/
  /*justify-content: center;*/
  /*display: flex;*/
}
.roomBang{
  background-color: #b4eeff;
  width: 140px;
  height: 110px;
  margin-left: 5px;
  margin-top: 5px;
  font-size: 15px;
  position:relative;
  border: 2px solid #777777;
  /*border-radius:15px;*/
  /*justify-content: center;*/
  /*display: flex;*/

}
.size2{
  width: 300px;
}
.size3{
  width: 450px;
}
.size4{
  width: 600px;
}
.size5{
  width: 750px;
}
.unit{
  font-size: 30px;
  margin-left: 10%;
  margin-top: 20px;
}
.build{
  font-size: 30px;
  margin-left: 50px;
  margin-bottom: 10px;
  font-size: 35px;
}
.roomNo{
  margin-left: 20%;
  font-size: 15px;
  font-weight: 900;
}
.realName{
  margin-left: 30%;
}
.qianfei{
  margin-left: 20%;
}
.phone{
  overflow-wrap: break-word;
  margin-left: 24px;
  margin-right: 20px;
}
</style>
